<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检查安装环境 - Bibi Setup </title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/global.css" />
    <script src="assets/jquery-3.7.1.min.js" ></script>
</head>
<body>
    <div class="main-container">
        <div class="main-box">
            <div class="header">
                <div class="logo">
                    <img src="assets/image/logo.svg"  style="width: 28px; height: 28px;" /> 安装环境
                </div>
                <div id="loading">
                    <div class="spinner-border">
                        <span class="visually-hidden">Loading...</span>
                      </div>
                </div>
            </div>
            <div class="body">
                <div class="content-box">
                   
                </div>
                <div class="btn-box">
                    <button class="btn btn-primary" style="width: 100%;" id="main" onclick="next()" disabled>下一步</button>    
                </div>
           </div>      
        </div>
    </div>

    <script>
    function check(){
        $.ajax({
            url:'work/check-env.php',
            dataType:"json",
            success:function(data){
                $('#loading').hide();
                
                let html = '';
                
                let status = true;
                
                for(let i in data){
                    let element = data[i];
                    html += '<div class="item">';
                    html += '<div class="dot">';
                    if (element.status == 'yes'){
                        html += '<img src="assets/image/check-circle.svg" width="16" height="16" />';
                    }

                    if (element.status == 'error'){
                        html += '<img src="assets/image/check-error.svg" width="16" height="16" />';
                        status = false;
                    }


                    if (element.status == 'warning'){
                        html += '<img src="assets/image/check-warning.svg" width="16" height="16" />';
                    }
                    html += '</div>';
                    html += '<div class="title">'+element.message+'</div>'
                    html += '</div>';
                };


                if (status) $('#main').attr('disabled',false);
                
                $('.content-box').append(html);
            }
        });
    }

    function next(){
        location.href = 'database.html';
    }

    $(function(){
        check();


    });

    </script>
</body>

<style>
.item{
    display: flex;
    align-items: center;
}

.item .dot{
    width: 30px;
    display: flex;
    align-items: center;
}

</style>
</html>